<template>
  <div id="GaiGouYuan">
       <!--    导航栏 -->
         <van-nav-bar
            title="采购员申请"
            left-arrow
            :fixed=true
            :border=true
            @click-left="$router.go(-1)"
         ></van-nav-bar>
         <div  style="margin-top:4rem;margin-left:3.5rem;width:15rem;height:2rem;">              
            <van-button  round block type="primary" @click="submit()">
                 点击申请成为采购员
            </van-button>
        </div>

         <!-- 路由的出口 -->
         <transition name="router-slider" mode="out-in">
            <router-view></router-view>
          </transition>
  </div>
</template>

<script>
import { DatetimePicker, NoticeBar ,Toast} from 'vant'
 import { tobeCGY } from './../../../../service/api/index.js'
 import {mapState,mapMutations} from 'vuex'
	export default{
     name:"Pay",
     data(){
         return{


         }
     },
      
      mounted(){
        //  console.log(this.userInfo.uid);
      },
      computed:{
          ...mapState(["userInfo"]),

     },
     methods:{
        ...mapMutations(['UPDATE_USERLEIXING']),
            async submit(){
                //付款操作
                 let result = await tobeCGY(this.userInfo.uid);
                   console.log(result);
                  if (result.status==='200') {
                        //跳转到支付成功页面
                          this.$router.push({
                            name:'CaiGouYuanSuc'
                      });
                   this.UPDATE_USERLEIXING();
                 }

            }

          
     }

	}
</script>


<style lang="less" scoped>
     #GaiGouYuan{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
      overflow-y: scroll;

     }


    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>